<!-- Part of OdooAppBox(https://github.com/youzengjian/OdooAppBox). 
See README.md and LICENSE files for full copyright and licensing details. -->

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle icon-only class="show_menu" [style.display]="display_search?'none':'inherit'">  
      <i class="fa fa-fw fa-bars" aria-hidden="true"></i>
    </button>
    <ion-buttons start [style.display]="display_search?'inherit':'none'">
      <button ion-button (click)="discard_search()" class="search discard">
        {{'Cancel' | translate}}
      </button>
    </ion-buttons>
    <ion-title>{{title}}</ion-title>
    <ion-buttons end>
      <button ion-button icon-only 
        (click)="actionCreateRecord($event)" 
        [style.display]="!display_search&&enable_create_record?'inherit':'none'">
        <i class="fa fa-fw fa-plus" aria-hidden="true"></i>
      </button>
      <button ion-button (click)="search()" [style.display]="display_search?'inherit':'none'" class="search confirm">
        {{'Search' | translate}}
      </button>
    </ion-buttons>
  </ion-navbar>
  <div class="action-bar">
    <form action="javascript:return true;" (click)="onSearchFormClick()">
      <div class="active-domain-group-list" *ngFor="let active_domain_group_item of active_domain_group_list;last as is_last_domain_group_item;" [class.last]="is_last_domain_group_item">
          <ion-item class="active-domain-group-item">
            <div class="active-domain-group-item-string" item-start>
              <ng-container *ngIf="active_domain_group_item.string">
                  {{active_domain_group_item.string}}
              </ng-container>
              <ng-container *ngIf="!(active_domain_group_item.string)">
                  <i class="fa fa-fw fa-filter"></i>
              </ng-container>
            </div>
            <div class="active-domain-group-item-domain-string">
                <span *ngFor="let domain_item of active_domain_group_item.domain_list;last as is_last_domain_item;">
                  {{domain_item.string}}
                  <span *ngIf="!is_last_domain_item">{{'Or' | translate}}</span>
                </span>
            </div>
          </ion-item>
        </div>
      <ion-input #searchInput [(ngModel)]="search_value" name="search_value" type="search" placeholder="{{'Search...' | translate}}" (keyup)="onSearchKeyUp($event)"></ion-input>
    </form>
  </div>
</ion-header>

<ion-content>
  <div [style.display]="display_search?'inherit':'none'">

    <div [style.display]="display_search_option?'none':'inherit'" class="active-search-list" *ngFor="let active_search_item of active_search_list">
      <div class="header">
        {{active_search_item.string}}
      </div>
      <div class="value-list">
        <ion-badge (click)="removeSearchValue(active_search_item, search_value)" class="active active-search-item" *ngFor="let search_value of active_search_item.values">
          <div class="value">{{search_value}}</div>
          <div class="clear-item"><i class="fa fa-fw fa-times" aria-hidden="true"></i></div>
        </ion-badge>
      </div>
    </div>

    <div [style.display]="display_search_option?'none':'inherit'" class="filter-group-list" *ngFor="let filter_group of filter_group_list">
        <div class="header">
          <ng-container *ngIf="filter_group.string">
              {{filter_group.string}}
          </ng-container>
        </div>
        <div class="filter-list">
          <ion-badge (click)="toggleFilter(filter_item)" [class.active]="filter_item.active" class="filter-item" *ngFor="let filter_item of filter_group.filter_list">
            <div class="value">{{filter_item.string}}</div>
            <div class="clear-item" [style.display]="filter_item.active?'inherit':'none'">
              <i class="fa fa-fw fa-times" aria-hidden="true"></i>
            </div>
          </ion-badge>
        </div>
      </div>

    <div [style.display]="display_search_option?'inherit':'none'">
      <ion-item class="search-list-item" (click)="confirmSearchOption(search_item)" *ngFor="let search_item of search_list;">
        <div item-start>
          {{'Search' | translate}} {{search_item.string}}：
        </div>
        {{search_value}}
        <button ion-button icon-only clear item-end>
          <i class="fa fa-fw fa-search" aria-hidden="true"></i>
        </button>
      </ion-item>
      <ion-item class="search-list-item" (click)="clearSearchInput()">
        <div item-start>
          {{'Discard search input' | translate}}
        </div>
        <button ion-button icon-only clear item-end>
          <i class="fa fa-fw fa-trash" aria-hidden="true"></i>
        </button>
      </ion-item>
    </div>
    <div style="display: flex; justify-content: center; color:#ddd; text-decoration: underline;">
      <!-- You must keep this information. -->
      Powered by OdooAppBox
    </div>
  </div>
  <div [style.display]="display_search?'none':'inherit'">
    <ion-refresher (ionRefresh)="doRefresh($event)">
        <ion-refresher-content
        pullingIcon="arrow-dropdown"
        pullingText="{{'Dropdown to update' | translate}}"
        refreshingSpinner="circles"
        refreshingText="{{'Loading...' | translate}}">
      </ion-refresher-content>
    </ion-refresher>
    <ion-list>
      <ion-item-sliding *ngFor="let record of records">
        <ion-item class="record">
          <kanban #kanbanComponent
                  [current_page]='current_page'
                  [context]='action_context'
                  [view_form]="action_view_form" 
                  [res_model]="action_res_model" 
                  [record]="record" 
                  [template]="template" 
                  [model_access_rights]="model_access_rights"
                  [options]="action_options"
                  (click)="onRecordClick($event, record, kanbanComponent)"
                  ></kanban>
        </ion-item>
        <ion-item-options side="right">
          <button class="copy" ion-button [class.disabled]="!enable_create_record" (click)="copy(record)">
            <i class="fa fa-fw fa-2x fa-files-o" aria-hidden="true"></i>
            {{'Duplicate' | translate}}
          </button>
          <button class="unlink" ion-button [class.disabled]="!enable_unlink_record" (click)="unlink(record)">
            <i class="fa fa-fw fa-2x fa-trash-o" aria-hidden="true"></i>
            {{'Delete' | translate}}
          </button>
        </ion-item-options>
      </ion-item-sliding>
      <div *ngIf="no_more_data"
           style="text-align: center; color:#ccc; border-bottom: none; padding: 1.6rem; font-size: 1.6rem">
        {{'No More Data' | translate}}
      </div>
      <div style="display: flex; justify-content: center; color:#ccc; text-decoration: underline;">
        <!-- You must keep this information. -->
        Powered by OdooAppBox
      </div>
    </ion-list>
    <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
        <ion-infinite-scroll-content
          loadingSpinner="bubbles"
          loadingText="{{'Loading...' | translate}}">
        </ion-infinite-scroll-content>
    </ion-infinite-scroll>
  </div>
</ion-content>


